<template>
  <div class="app-container">
    <div class="container-module">
      <div class="search-module">
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex; flex-wrap: wrap">
            <div style="flex: 1">
              <el-form-item
                class="search-form-item"
                label="名称"
                style="margin: 5px 0"
              >
                <el-input
                  placeholder="名称"
                  v-model="searchForm.name"
                  clearable
                >
                </el-input>
              </el-form-item>
            </div>
            <div style="margin: 5px 0; text-align: right">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getListWay"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resetting"
                  >重置</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div style="margin-top: 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :span="20">
              <el-button
                type="primary"
                size="small"
                @click="addProtocol"
                icon="el-icon-circle-plus-outline"
                >添加协议</el-button
              >
            </el-col>
            <el-col :span="4" style="float: right">
              <div class="right-panel el-button-group">
                <el-button
                  class=""
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetting"
                ></el-button>
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button
                      class=""
                      icon="el-icon-s-operation"
                      size="mini"
                    ></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="fruit in allTableThead"
                      :key="fruit"
                    >
                      <el-checkbox
                        v-model="checkboxTableThead"
                        :label="fruit"
                        >{{ tableTheadOptions[fruit].label }}</el-checkbox
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="no_pagination_single_card">
          <el-table
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            v-loading="loading"
            highlight-current-row
            :data="dataList"
            style="width: 100%"
            height="100%"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="fruit == 'status'">
                  <el-switch
                    @change="switchShowWay(scope.row)"
                    v-model="scope.row.status"
                    :active-value="1"
                    :inactive-value="2"
                  >
                  </el-switch>
                </div>
                <span v-else>
                  {{ scope.row[fruit] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="80" align="center">
              <template slot-scope="scope">
                <el-button
                  v-hasPermi="'label/edit'"
                  style="margin-right: 10px"
                  type="primary"
                  size="mini"
                  @click="puttagsWay(scope.row)"
                >
                  编辑
                </el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="deltagsWay(scope.row)"
                >
                  <el-button
                    v-hasPermi="'label/del'"
                    type="danger"
                    size="mini"
                    slot="reference"
                  >
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="添加协议"
      size="70%"
      :withHeader="false"
      :show-close="true"
      :visible.sync="addprotocols"
      @close="handleClose"
    >
      <div style="position: relative" v-loading="addprotocolload">
        <div class="drawerTitle">
          <span>协议-添加</span>
          <div class="close" @click="handleClose">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="drawerContent" style="padding: 10px 30px">
          <div class="tabsView">
            <el-form
              ref="basicForm"
              :model="basicForm"
              label-width="100px"
              :rules="basicRules"
            >
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder"></div>
                  <div class="text">协议信息</div>
                </div>
                <div class="right"></div>
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item
                    class="width100"
                    label="协议类型："
                    prop="protocoltype"
                  >
                    <el-select
                      class="width90"
                      @change="protocoltypeChanges"
                      v-model="protocoltype"
                      placeholder="请选择协议类型"
                    >
                      <el-option
                        v-for="item in agreementList"
                        :key="item.tag_value"
                        :label="item.tag_name"
                        :value="item.tag_value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    class="width100"
                    label="版本号："
                    prop="version"
                  >
                    <el-input
                      class="width90"
                      v-model="basicForm.version"
                      maxlength="20"
                      show-word-limit
                      placeholder="选填"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder"></div>
                  <div class="text">协议内容</div>
                </div>
                <div class="right"></div>
              </div>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="协议内容" prop="content">
                    <editor-text
                      v-model="content"
                      :height="500"
                      @input="contentcallback"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="button-box">
              <el-button class="next-button" @click="saveSubmit"
                >保存</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getSysAgreementList,
  getSysAgreementConfigList,
  SaveSysAgreement,
  getAgreementInfo,
  delAgreement,
  SaveAgreementStatus,
} from "@/api/admin/agreement";
import { getDictionaryTypeList } from "@/api/index";
const tableTheadOption = {
  created_at: {
    label: "创建时间",
    field: "created_at",
  },
  updated_at: {
    label: "更新时间",
    field: "updated_at",
  },
  dictionary_value_name: {
    label: "协议名称",
    field: "dictionary_value_name",
  },
  version: {
    label: "版本号",
    field: "version",
  },
  status: {
    label: "状态",
    field: "status",
  },
};

const allTableThead = [
  "created_at",
  "dictionary_value_name",
  "version",
  "updated_at",
  "status",
];
const defaultTableThead = [
  "created_at",

  "dictionary_value_name",
  "version",
  "updated_at",
  "status",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: true,
      agreementList: [], // 协议类型
      searchForm: {},
      dataList: [],
      addprotocols: false,
      addprotocolload: false,
      activeName: "protocol_information",
      basicForm: {
        id: "",
        dictionary_id: "",
        dictionary_value_id: "",
        version: "",
        content: "",
        status: 1,
      },
      content: "",
      protocoltype: "",
      basicRules: {
        protocoltype: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请选择协议类型"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        version: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[0-9.]/;
              if (value == "") {
                return callback(new Error("请输入版本号"));
              } else {
                if (!req.test(value)) {
                  return callback(new Error("版本号只能为数字和.组成"));
                }
              }
              callback();
            },
            trigger: "change",
          },
        ],
        content: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.content == "") {
                return callback(new Error("请填写协议内容"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    const p1 = new Promise((req, rej) => {
      getDictionaryTypeList({ type: "sys_agreement_type", status: 1 }).then(
        (res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            rej();
            return;
          }
          this.agreementList = res.data;
          req();
        }
      );
    });
    Promise.all([p1])
      .then(() => {
        this.getListWay();
      })
      .catch(() => {
        this.loading = false;
      });
  },
  methods: {
    getListWay() {
      this.loading = true;
      getSysAgreementConfigList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.dataList = res.data;
      });
    },
    resetting() {
      this.searchForm = {};
      this.getListWay();
    },
    deltagsWay(row) {
      this.loading = true;
      delAgreement({ id: row.id }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false;
          this.$messages.error(res.msg);
          this.getListWay();
          return;
        }
        if (res.code == 200) {
          this.$messages.success("删除成功");
          this.getListWay();
        } else {
          this.$messages.error(res.msg);
        }
      });
    },
    switchShowWay(val) {
      this.loading = true;
      var obj = {
        status: val.status,
        id: val.id,
      };
      SaveAgreementStatus(obj)
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            this.$messages.error(res.msg);
            this.getListWay();
            return;
          }
          if (res.code == 200) {
            this.$messages.success("修改成功");
            this.getListWay();
          } else {
            this.$messages.error(res);
            this.getListWay();
          }
        })
        .catch(() => {
          this.loading = false;
          this.getListWay();
        });
    },
    puttagsWay(row) {
      this.$router.push(
        "/admin/agreement/save?id=" +
          row.id +
          "&valueId=" +
          row.dictionary_value_id
      );
    },
    // 添加协议
    addProtocol() {
      this.addprotocols = true;
      this.addprotocolload = true;

      setTimeout(() => {
        this.$forceUpdate();
        this.addprotocolload = false;
      }, 1000);
    },
    // 关闭抽屉执行
    handleClose() {
      this.contentcallback("");
      this.$refs.basicForm.resetFields();
      this.protocoltype = "";
      this.addprotocols = false;
      this.addprotocolload = false;
      this.getListWay();
    },
    // 选择协议类型
    protocoltypeChanges(val) {
      if (val !== "") {
        this.agreementList.forEach((item) => {
          if (val == item.tag_value) {
            this.basicForm.dictionary_value_id = item.id;
            this.basicForm.dictionary_id = item.dictionary_id;
          }
        });
      } else {
        this.basicForm.dictionary_value_id = "";
        this.basicForm.dictionary_id = "";
      }
    },
    // 协议内容回调
    contentcallback(e) {
      this.content = e;
    },
    // 保存协议
    saveSubmit() {
      this.$refs.basicForm.validate((valid) => {
        if (valid) {
          this.addprotocolload = true;
          this.basicForm.content = this.content;
          SaveSysAgreement(this.basicForm).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.addprotocolload = false;
              return this.$messages.error(res.msg);
            }
            this.basicForm.content = "";
            this.content = "";
            this.$messages.success(res.msg);
            this.handleClose();
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.drawerTitle {
  position: relative;
  padding: 15px;
  background-color: #1890ff;
  color: #fff;
  .close {
    position: absolute;
    right: 30px;
    top: 15px;
    cursor: pointer;
  }
}
.drawerContent {
  padding: 10px 30px;
  .infoView {
    position: relative;
    padding: 20px;
    border: 1px solid #efefef;
    border-radius: 5px;
    .status {
      position: absolute;
      top: 20px;
      right: 20px;
      span {
        font-size: 14px;
        color: #4e5969;
        font-weight: 700;
      }
      i {
        font-style: normal;
        font-size: 14px;
        color: #85ce61;
        font-weight: 700;
        margin-left: 10px;
      }
    }
    .descriptionsLabel {
      width: 65px;
      font-size: 14px;
      color: #4e5969;
      font-weight: 700;
    }
    .descriptionsContent {
      font-size: 14px;
      color: #000;
      font-weight: 700;
    }
  }
  .tabsView {
    margin-top: 10px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #dfe4ed00;
  }
}
.informationTitleView {
  height: 40px;
  background-color: #f9f9f9;
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  .leftBox {
    display: flex;
    .leftborder {
      width: 5px;
      height: 100%;
      background-color: #1890ff;
    }
    .text {
      margin-left: 20px;
      font-size: 14px;
      font-weight: 700;
      color: #4e5969;
      line-height: 40px;
    }
  }
  .right {
    line-height: 40px;
    font-size: 12px;
    margin-right: 20px;
    span {
      color: #4e5969;
      font-weight: 700;
    }
    i {
      font-style: normal;
      color: #85ce61;
      font-weight: 700;
      margin-left: 10px;
    }
  }
}
</style>